<template>
  <div>
      <zh-row :span="24"  :gutter="[16,16]" >
          <zh-col>
              <zh-card title="查询条件">
                  <zh-form  ref="roleFrom"  :model="queryUserParam">
                    <zh-input type="select" v-model="queryUserParam.searchType" label="查询类型" :options="searchTypeData" prop="searchType" placeholder="默认查询未授权用户" @change="searchTypeChange">
                    </zh-input>
                    <zh-input label="姓名" v-model="queryUserParam.fullName" prop="fullName" placeholder="支持模糊查询"/>
                    <template v-if="advanced">
                        <zh-input label="用户名" v-model="queryUserParam.userName" prop="userName" placeholder="支持模糊查询"/>
                        <zh-input
                            label="所属组织"
                            type="tree"
                            v-model="queryUserParam.orgIds"
                            prop="orgIds"
                            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                            placeholder="支持多选"
                            treeNodeFilterProp="title"
                            allowClear
                            multiple
                            treeDefaultExpandAll
                            :treeData="orgSelectTreeData"
                            >
                        </zh-input>
                        <zh-input prop="status" type="select"  label="状态"  placeholder="单选" allowClear  :options="statusData" v-model="queryUserParam.status" ></zh-input>
                        <zh-input type="select" label="用户类型" v-model="queryUserParam.userTypeList" mode="multiple" placeholder="支持多选" allowClear :options="dictData.userType">
                        </zh-input>
                    </template>
                    <zh-form-query v-model="advanced" @queryClick="findUserListBtn"></zh-form-query>
                  </zh-form>
              </zh-card>
          </zh-col>
          <zh-col>
              <zh-table :shadow="true" ref="userListTable" title="用户列表" row-id="userId" :url="tableUrl" :columns="userColumn"   :disabled="false">
                <template #fixed_edit="{ row }">
                    <zh-input type="switch" :formflag="false" :disabled="row.disabled" v-model="row.fixed" checked-children="是" un-checked-children="否"  @change="onFixedChange(row)"></zh-input>
                </template>
              </zh-table>
          </zh-col>
      </zh-row>
  </div>
</template>

<script>
import { getRolePrivilegeUserList,getBatchDict,getOrgSelectTree,editUserPrivilege } from "@/services/system/api"
import modal from 'ant-design-vue/es/modal'
const statusMap = {
  0: {
    status: 'error',
    text: '禁用'
  },
  1: {
    status: 'success',
    text: '启用'
  }
}
const flagMap = {
  0: {
    status: 'default',
    text: '否'
  },
  1: {
    status: 'processing',
    text: '是'
  }
}
export default {
  name: 'RouterUserManager',
  components: {
  },
  props: {
    roleInfo: {
      type: Object,
      default: () => {},
      required: false
    }
  },
  data () {
    return {
      description: '角色授权用户界面',
      // 高级搜索 展开/关闭
      advanced: false,
      dictData: {},
      orgSelectTreeData: [],
      tableUrl:getRolePrivilegeUserList,
      // 用户查询条件
      queryUserParam: {searchType:'1',userName:undefined,fullName:undefined,orgIds:undefined,status:undefined,userTypeList:undefined},
      // 角色id
      roleId: null,
      statusData:[{dictKey:'1',dictValue:'启用'},{dictKey:'0',dictValue:'禁用'}],
      searchTypeData:[{dictKey:'1',dictValue:'从未授权用户'},{dictKey:'2',dictValue:'已授权用户'},{dictKey:'3',dictValue:'全部'}],
      // 用户列表参数
      userColumn: [
        { type: 'checkbox', width: 50, fixed: 'left' },
        { type: 'seq', width: 50, fixed: 'left', align: 'center', title: '序号' },
        { field: 'userId', title: '用户Id',visible: false, fixed: 'left', align: 'center', width: 150 },
        { field: 'userName', title: '用户名', fixed: 'left', align: 'center', width: 150 },
        { field: 'fullName', title: '姓名', align: 'center', width: 150 },
        { field: 'fixed', title: '角色可编辑', align: 'center', width: 120 ,editRender:{},slots: {edit: 'fixed_edit',default:  ({ row }) => {
            return this.setFlag(row)
        }}},
        { field: 'userType', title: '用户类型key',visible: false, align: 'center', width: 150 },
        { field: 'userTypeName', title: '用户类型', align: 'center', width: 150 },
        { field: 'status', title: '状态', align: 'center', width: 80, slots: { default:  ({ row }) => {
            return this.setStatus(row)
        } } },
        { field: 'email', title: '电子邮箱', align: 'center', showOverflow: true, width: 150 },
        { field: 'cellphone', title: '手机', align: 'center', width: 100 },
        { field: 'idcard', title: '身份证', align: 'center', width: 150 },
        { field: 'address', title: '地址', align: 'center', showOverflow: true, width: 200 },
        { field: 'officePhone', title: '办公室电话', align: 'center', width: 100 },
        { field: 'shortPhone', title: '短号', align: 'center', width: 60 },
        { field: 'orgId', title: '所属组织', align: 'center', showOverflow: true, width: 150 },
        { field: 'orgName', title: '所属组织', align: 'center', showOverflow: true, width: 150 },
        { field: 'superiorsName', title: '直接上级', align: 'center', width: 150 },
        { field: 'regdate', title: '创建日期', align: 'center', width: 80 },
        { field: 'remarks', title: '备注', align: 'center', showOverflow: true, width: 250 }
      ]
    }
  },
  created () {
    if (this.roleInfo) {
      this.roleId = this.roleInfo.roleId
    } else {
      this.roleId = null
    }
    const params = {}
    params.dictFields = 'userType'
    this.$http.post(getBatchDict,params).then(res => {
      this.dictData = res.result
    })
    // 下拉组织树初始化
    this.$http.post(getOrgSelectTree,params).then(res => {
      this.orgSelectTreeData = res.result
    })
    
  },
  mounted(){
    this.findUserList()
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    }
  },
  methods: {
    findUserListBtn () {
      if (this.roleId) {
        this.findUserList()
      } else {
        modal.warn({ title: '系统异常提示', content: '没有传入角色id' })
      }
    },
    findUserList () {
      if (this.roleId) {
        const params = Object.assign({}, this.queryUserParam)
        params.roleId = this.roleId
        this.$refs.userListTable.query(params)
      } else {
        modal.warn({ title: '系统异常提示', content: '没有传入角色id' })
      }
    },
    setFlag (row) {
        const text = flagMap[row.fixed].text
        const status = flagMap[row.fixed].status
        if (text) {
            return [<a-badge status={status} text={text}/>]
        }else {
            return row.fixed
        }
    },
    setStatus (row) {
        const text = statusMap[row.status].text
        const status = statusMap[row.status].status
        if (text) {
            return [<a-badge status={status} text={text}/>]
        }else {
            return row.status
        }
    },
    onFixedChange(row){
        if(!this.queryUserParam.searchType){
            return
        }
        if(this.queryUserParam.searchType=='1'){
            return
        }
        const params = {}
        params.objectId = this.roleId
        params.objectType = 'role'
        params.userId=row.userId
        params.fixed=row.fixed
        setTimeout(() => {
            this.$http.post(editUserPrivilege,params).then(() => {
            modal.info({ title: '成功提示', content: text + '成功' })
            }).catch(() => {
            })
        }, 200)
    },
    searchTypeChange (value) {
      this.findUserList()
      this.$emit('roleUserBtn', value)
      setTimeout(() => {
        this.userChecked = []
        this.$refs.userListTable.clearCheckboxRow()
        this.$refs.userListTable.clearCheckboxReserve()
      }, 50)
    },
   
  }
}
</script>
